<template>
    <div class="component-finance-item" @click="$emit('onclick', data.id)">
        <img class="user-img" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1958966202,1289193182&fm=27&gp=0.jpg">
        <div class="text-content">
            <div class="title">{{data.name}}</div>
            <div class="data-box" v-if="data.company">
                <span class="text-gray">公司：</span>
                <span>{{data.company}}</span>
            </div>
            <div class="data-box" v-if="data.mobile">
                <span class="text-gray">电话：</span>
                <span>{{data.mobile}}</span>
            </div>
            <div class="data-box" v-if="data.official">
                <span class="text-gray">官网：</span>
                <span>{{data.official}}</span>
            </div>
            <div class="data-box" v-if="data.industry">
                <span class="text-gray">行业：</span>
                <span>{{data.industry}}</span>
            </div>
            <div class="data-box" v-if="data.tel">
                <span class="text-gray">电话：</span>
                <span>{{data.tel}}</span>
            </div>
            <div class="data-box" v-if="data.fax">
                <span class="text-gray">传真：</span>
                <span>{{data.fax}}</span>
            </div>
            <div class="data-box" v-if="data.email">
                <span class="text-gray">邮箱：</span>
                <span>{{data.email}}</span>
            </div>
            <div class="data-box" v-if="data.business">
                <span class="text-gray">业务：</span>
                <span>{{data.business}}</span>
            </div>
            <div class="data-box" v-if="data.address">
                <span class="text-gray">地址：</span>
                <span>{{data.address}}</span>
            </div>
        </div>
        <div class="btn-box">
            <div class="collect-gold" v-if="data.collection" @click="$emit('onclick')">
                <img src="../assets/collect-gold.svg">
                <span>收藏</span>
            </div>
            <div class="collect-gray" v-else="">
                <img src="../assets/collect-gray.svg">
                <span>已收藏</span>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';

    .component-finance-item{
        display: flex;
        border-bottom: 1px solid @color-line-gray;
        position: relative;

        .user-img{
            width: 4rem;
            height: 4rem;
            margin-top: 1.5rem;
            margin-left: 1.2rem;
        }

        .text-content{
            flex: 1;
            padding: 1.3rem 1.5rem 1.5rem 1rem;
            font-size: 1.3rem;
            line-height: 1.9rem;
            .data-box{
                margin-top: .5rem;
                text-align: justify;
            }
            .title{
                font-size: 1.5rem;
                line-height: 1.9rem;
            }
        }
        .btn-box{
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;

            .collect-gold, .collect-gray{
                width: 6.5rem;
                text-align: center;
                border-radius: .3rem;
                font-size: 1.1rem;
                line-height: 2.7rem;
                img, span{
                    vertical-align: middle;
                }
                img{
                    margin-right: .4rem;
                }
            }

            .collect-gold{
                border: 1px solid @app-color;
                color: @app-color;
            }

            .collect-gray{
                border: 1px solid @color-text-gray;
                color: @color-text-gray;
            }
        }
    }

</style>

<script>
    export default {
        props: ['data']
    }
</script>